<script lang="ts" setup>
import LxEntry from './common/LxEntry.vue'
import LxPop from './common/LxPop.vue'

const router = useRouter()
const route = useRoute()

const pages = [
  { title: '主页', path: '/', icon: 'home' },
  { title: '联系人', path: '/contacts', icon: 'contacts' },
  { title: '订单', path: '/orders', icon: 'order' },
  { title: '物资', path: '/materials', icon: 'box' },
  { title: '人事', path: '/jobs', icon: 'worker' },
  { title: '统计', path: '/statistics', icon: 'combo-chart' },
]

const pages2 = [
  { title: '配置', path: '/', icon: 'config' },
  { title: '登出', path: '/logout', icon: 'logout' },
]

const mobileMenuShown = ref(false)

// function go(path: string) {
//   router.push(path)
// }

function mobileGo(path: string) {
  mobileMenuShown.value = false
  router.push(path)
}

function handleShowMenu() {
  mobileMenuShown.value = true
}

// const appGrid = computed(() => {
//   return lodash.chunk(pages, 3)
// })

// setTimeout(() => {
//   console.log(appGrid.value)
// }, 1000)
</script>

<template>
  <div h-100vh flex flex-col bg-gray-100>
    <div h-16 flex items-center bg-white px-4 shadow-md>
      <img
        mr h-8 w-8
        src="/icons/erp.png"
        @click="handleShowMenu"
      >
      <div text-size-5 font-bold lh-64px md-lh-48px>
        {{ route.meta.title }}
      </div>
    </div>
    <div flex-1 of-hidden>
      <div h-full w-full of-auto>
        <slot />
      </div>
    </div>
    <LxPop v-model="mobileMenuShown">
      <div flex flex-wrap pt2>
        <LxEntry
          v-for="(app, ai) in pages" :key="ai"
          :action="() => mobileGo(app.path)"
          :icon="app.icon"
          :title="app.title"
          :grid="3"
        />
      </div>
      <div flex flex-wrap pt b-t="1 solid white">
        <LxEntry
          v-for="(app, ai) in pages2" :key="ai"
          :action="() => mobileGo(app.path)"
          :icon="app.icon"
          :title="app.title"
          :grid="3"
        />
      </div>
    </LxPop>
  </div>
</template>
